import Vue from 'vue'; // vue框架
import VueRouter from 'vue-router'; // 路由管理器+两个标签(router-view/router-link)

// Vue.use 内部 会调用 VueRouter.install 方法，用来 批量 注册组件！
Vue.use(VueRouter);

// 路由表(配置 hash值 和 组件的 映射关系 和 附带参数)
const routes = [
  {
    path: '/study', // localhost:80/#/study
    component: () => import('@/views/study-more/index.vue')
  },
  {
    path: '/login', // localhost:80/#/login
    component: () => import('@/views/login/index.vue')
  },
  {
    path: '/', // localhost:80/#/
    component: () => import('@/views/layout/index.vue'),
    children: [
      {
        path: '', // 默认路由
        component: () => import('@/views/home/index.vue')
      },
      {
        path: '/qa',
        component: () => import('@/views/qa/index.vue')
      },
      {
        path: '/video',
        component: () => import('@/views/video/index.vue')
      },
      {
        path: '/my',
        component: () => import('@/views/my/index.vue')
      },
    ]
  },
  {
    path: '/search', // localhost:80/#/search
    component: () => import('@/views/search/index.vue')
  },
  { // 文章详情组件-路由
    path: '/article/:aid',
    component: () => import('@/views/article/index.vue'),
    // 将路由动态参数映射到组件的 props 中，更推荐这种做法
    props: true
  },
  { // 个人资料
    path: '/profile',
    component: () => import('@/views/profile/index.vue')
  }
];

// 创建 VueRouter 实例
const router = new VueRouter({
  routes, // 注入 路由表
});


// 导出 VueRouter 实例
export default router;
